<template>
  <ECharts class="chart" :option="option" />
</template>

<script setup>
import ECharts from 'vue-echarts'
import { ref, computed, onMounted } from 'vue'
import * as echarts from 'echarts';
import { getScamEventList } from '@/api/flaud/scamevent'

const page = ref(0)
const total = ref(0)
const pageSize = ref(0)
const tableData = ref([])
const searchInfo = ref({})

onMounted(() => {
  getTableData()
})

const getTableData = async () => {
  const table = await getScamEventList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
  console.log(tableData.value)
}


const formatChartData = () => {
  const dateArr = [];
  const dataArr = [];
  tableData.value.forEach(item => {
    const yearMonth = item.eventTime.slice(0, 7); 
    dateArr.push(yearMonth);
    dataArr.push(item.scammerCount);
  });
  return {
    xData: dateArr,
    yData: dataArr
  };
};

const option = computed(() => {
  const { xData, yData } = formatChartData();
  return {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    title: {
      left: 'center',
      text: '各时间段诈骗人数'
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 10
      },
      {
        start: 0,
        end: 10
      }
    ],
    series: [
      {
        name: '诈骗人数',
        type: 'line',
        symbol: 'none',
        sampling: 'lttb',
        itemStyle: {
          color: 'rgb(255, 70, 131)'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 158, 68)'
            },
            {
              offset: 1,
              color: 'rgb(255, 70, 131)'
            }
          ])
        },
        data: yData
      }
    ]
  };
});
</script>

<style scoped>
.chart {
  width: 1000px;
  height: 500px;
}
</style>